<template>
	<el-dialog title="编辑表" :visible.sync="visible" width="100%" top="0" 
	append-to-body
	fullscreen>
		<el-card>
			<el-tabs v-model="activeName">
				<el-tab-pane label="基本信息" name="basic">
					<BasicInfoForm ref="basicInfoFormRef" :info="info" :menus="menus" />
				</el-tab-pane>
				<el-tab-pane label="字段信息" name="columnInfo">
					<el-table ref="dragTable" :data="columns" row-key="id" :max-height="tableHeight">
						<el-table-column label="拖拽排序" type="index" min-width="5%" class-name="allowDrag" width="80px">
							<template slot-scope="scope">
								<div style="cursor: pointer;text-align: center;">
									<i class="el-icon-thumb"></i>&nbsp;{{scope.row.sort}}
								</div>
							</template>
						</el-table-column>
						<el-table-column label="字段列名" prop="columnName" min-width="10%" :show-overflow-tooltip="true" />
						<el-table-column label="字段描述" min-width="10%">
							<template slot-scope="scope">
								<el-input v-model="scope.row.columnComment"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="物理类型" prop="columnType" min-width="10%" :show-overflow-tooltip="true" />
						<el-table-column label="Java类型" min-width="11%">
							<template slot-scope="scope">
								<el-select v-model="scope.row.javaType">
									<el-option label="Long" value="Long" />
									<el-option label="String" value="String" />
									<el-option label="Integer" value="Integer" />
									<el-option label="Double" value="Double" />
									<el-option label="BigDecimal" value="BigDecimal" />
									<el-option label="Date" value="Date" />
									<el-option label="Boolean" value="Boolean" />
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="java属性" min-width="10%">
							<template slot-scope="scope">
								<el-input v-model="scope.row.javaField"></el-input>
							</template>
						</el-table-column>

						<el-table-column label="插入" min-width="5%">
							<template slot-scope="scope">
								<el-checkbox :true-label="true" :false-label="false" v-model="scope.row.isInsert"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="必填" min-width="5%">
							<template slot-scope="scope">
								<el-checkbox :true-label="true" :false-label="false" v-model="scope.row.isRequired"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="列表" min-width="5%">
							<template slot-scope="scope">
								<el-checkbox :true-label="true" :false-label="false" v-model="scope.row.isList"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="查询" min-width="5%">
							<template slot-scope="scope">
								<el-checkbox :true-label="true" :false-label="false" v-model="scope.row.isQuery"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column width="70px" align="center">
							<span slot="header">
								<el-tooltip content="可进行升序或倒序排序" placement="top">
									<i class="el-icon-question"></i>
								</el-tooltip>
								排序
							</span>
							<template slot-scope="scope">
								<el-checkbox :true-label="true" :false-label="false" v-model="scope.row.isSort"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column width="70px" align="center">
							<span slot="header">
								<el-tooltip content="用于选择过滤,支持多选" placement="top">
									<i class="el-icon-question"></i>
								</el-tooltip>
								过滤
							</span>
							<template slot-scope="scope">
								<el-checkbox :true-label="true" :false-label="false" v-model="scope.row.isFilter"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="查询方式" min-width="10%">
							<template slot-scope="scope">
								<el-select v-model="scope.row.queryType">
									<el-option label="=" value="EQ" />
									<el-option label="!=" value="NE" />
									<el-option label=">" value="GT" />
									<el-option label=">=" value="GTE" />
									<el-option label="<" value="LT" />
									<el-option label="<=" value="LTE" />
									<el-option label="LIKE" value="LIKE" />
									<el-option label="BETWEEN" value="BETWEEN" />
									<el-option label="IN" value="IN" />
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="表单类型" min-width="12%">
							<template slot-scope="scope">
								<el-select v-model="scope.row.htmlType">
									<el-option label="文本框" value="input" />
									<el-option label="文本域" value="textarea" />
									<el-option label="文本JSON" value="json" />
									<el-option label="文件上传" value="fileUpload" />
									<el-option label="文件上传(多)" value="fileUploadMore" />
									<el-option label="开关" value="switch" />
									<el-option label="下拉框" value="select" />
									<el-option label="下拉框(多选)" value="selectMore" />
									<el-option label="单选框" value="radio" />
									<el-option label="复选框" value="checkbox" />
									<el-option label="日期控件" value="datetime" />
									<el-option label="富文本控件" value="editor" />
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="表格类型" min-width="12%">
							<template slot-scope="scope">
								<el-select v-model="scope.row.tableColumnType">
									<el-option label="普通文本" value="" />
									<el-option label="长文本" value="longText" />
									<el-option label="JSON文本" value="json" />
									<el-option label="文本复制" value="copy" />
									<el-option label="文件" value="file" />
									<el-option label="状态开关" value="switch" />
									<el-option label="选择单选" value="selectOne" />
									<el-option label="选择多选" value="selectMore" />
									<el-option label="富文本" value="fuwenben" />
									<el-option label="链接" value="link" />
									<el-option label="插槽" value="solt" />
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="字典类型" min-width="12%">
							<template slot-scope="scope">
								<el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
									<el-option v-for="dict in dictOptions" :key="dict.type" :label="dict.name"
										:value="dict.type">
										<span style="float: left">{{ dict.name }}</span>
										<span
											style="float: right; color: #8492a6; font-size: 13px">{{ dict.type }}</span>
									</el-option>
								</el-select>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
			<el-form label-width="100px">
				<el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
					<el-button type="primary" @click="submitForm()">提交</el-button>
					<el-button @click="close()">返回</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</el-dialog>
</template>

<script>
	import BasicInfoForm from "./BasicInfoForm";
	import Sortable from 'sortablejs'

	export default {
		name: "GenEdit",
		components: {
			BasicInfoForm,
		},
		data() {
			return {
				visible: false,
				// 选中选项卡的 name
				activeName: "columnInfo",
				// 表格的高度
				tableHeight: document.documentElement.scrollHeight - 245 + "px",
				// 表信息
				tables: [],
				// 表列信息
				columns: [],
				// 字典信息
				dictOptions: [],
				// 菜单信息
				menus: [],
				// 表详细信息
				info: {}
			};
		},
		mounted() {
			this.$nextTick(()=>{
				const tableId = this.$route.params && this.$route.params.tableId;
				if (tableId) {
					this.initData()
				}
			})
		},
		methods: {
			// 显示弹框
			show(params) {
				this.visible = true;
				this.$nextTick(()=>{
					this.initData(params.tableId)
					this.initDrag()
				})
			},
			initData(tableId){
				/** 查询字典下拉列表 */
				this.$api.appDictFindAllByList().then(data => {
					this.dictOptions = data;
				});
				
				/** 查询菜单下拉列表 */
				this.$api.sysMenuFindSelectByTree({
					isAll:false
				}).then(data => {
					 this.menus = data;
				});
				// 获取表详细信息
				this.$api.appGenTableFindById(tableId).then(data => {
					this.columns = data.rows;
					let info = data.info
					info.parentMenuId = [info.parentMenuId]
					this.info = info;
					this.tables = data.tables;
				});
			},
			/** 提交按钮 */
			submitForm() {
				this.$refs.basicInfoFormRef.checkForm((result)=>{
					if (result) {
						const genTable = this.info;
						genTable.parentMenuId = genTable.parentMenuId[genTable.parentMenuId.length-1]
						genTable.columns = this.columns;
						genTable.params = {
							treeCode: genTable.treeCode,
							treeName: genTable.treeName,
							treeParentCode: genTable.treeParentCode,
							parentMenuId: genTable.parentMenuId
						};
						this.$api.appGenTableEdit({
							content:JSON.stringify(genTable)
						}).then(data => {
							this.$emit("ok")
							this.close();
						});
					} else {
						this.$modal.msgError("表单校验未通过，请重新检查提交内容");
					}
				})
			},
			getFormPromise(form) {
				return new Promise(resolve => {
					form.validate(res => {
						resolve(res);
					});
				});
			},
			/** 关闭按钮 */
			close() {
				this.visible = false
			},
			initDrag(){
				console.info("initDrag",this.$refs.dragTable)
				const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
				const sortable = Sortable.create(el, {
					handle: ".allowDrag",
					onEnd: evt => {
						for (let index in this.columns) {
						  console.info("排序前",this.columns[index].columnName,this.columns[index].sort)
						}
						const targetRow = this.columns.splice(evt.oldIndex, 1)[0];
						this.columns.splice(evt.newIndex, 0, targetRow);
						for (let index in this.columns) {
						  this.columns[index].sort = parseInt(index) + 1;
						}
						for (let index in this.columns) {
						  console.info("排序后",this.columns[index].columnName,this.columns[index].sort)
						}
					}
				});
			}
		}
	};
</script>
